<template>
  <div class="box">
    <div class="top">
      <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png"   @click="accountClick"/>
      <span @click="show=true">
        <van-search
        shape="round"
        v-model="value"
        placeholder="搜索菜谱、食材和内容"
    />
      </span>
      <Popup :show="show" @shows="show=false"></Popup>
      <p><van-icon name="ellipsis" /></p>
    </div>
    <van-pull-refresh class="pull" v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div class="maincon">
        <div class="main">
          <div class="hot">

            <h4>
              热门话题 <span>查看更多 <router-link to="/clubs/Topic"> <van-icon name="arrow" /></router-link></span>
            </h4>

          </div>
          <div>
            <div class="ount">
              <p v-for="item in datalist" :key="item.newtitle"  @click="goDetail(item.hottopicId)">
                <router-link :to="{path:'/clubs/details'}">
                  <img :src="item.imgurl" alt="" />
                <span class="now">
                  <b>{{ item.onlooker }}人围观</b>
                  <span><van-icon name="comment-o" />{{ item.newtitle }}</span>
                </span>
              </router-link>
              </p>
            </div>
          </div>
          <div class="tab">
            <div class="Btab">
              <div class="tabs"  :class="luid == i?'on':''"  ref="Tab" v-for="(item,i ) in list"   :key="item.autumnId"
               @click="headleclick(i,item.autumnId)">
               <div> {{ item.autumn }}</div> 
              </div>
            </div>
             <div class="tabtu">
              <div class="tu" v-for="item in tablist" :key="item.title">
                 <router-link :to="{
                  path: ten?'/clubs/dishes':'/clubs/HotDeta',query:{id:item.autumnid}}"> 
                    <img :src="item.imgurl" alt="" />
                  </router-link>
                    <p class="time" >
                      <span>{{ item.time }}</span>
                      <b><van-icon name="star-o" />{{ item.good }}</b>
                    </p>
                    <!-- <p class="time1" v-else>
                      <span>{{ item.time }}</span>
                      <b @click="isClick"><van-icon name="good-job-o" />{{ item.goodnum }}</b>
                    </p> -->
                    <router-link to="/clubs/dishes">
                      <p class="title"><span>简单</span> {{ item.title }}</p>
                    </router-link>

                  </div>
             </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import Popup from './popup.vue'
import axios from "axios";
import clubs from "@/api/clubs.js"
import { Loading } from 'vant';
export default {
  name:"weiye",
  components:{
    Popup
  },
  data() {
    return {
      show: false,
      isLoading: false,
      value: "",
      list: [],
      datalist: [],
      ten:true,      
      tablist:[],
      count: 1,
       luid:0,
      index:0,
    };
  },
  mounted() {
    // axios.get("http://8.134.169.207:8000/hottopic/querypic").then(res=>{
    //   console.log(res)
    // })
    this.onRefresh();
    this.getClubsList1()
    this.getList1()
    this.getdataList()
  },
  methods: {
    goDetail(hottopicId){
     console.log("wwww",hottopicId)
      this.$store.commit('SET_DETAID',hottopicId)
      console.log("qqqqqq",this.$store.state.id)
    },
    async getList1() {
      // console.log(res);
      let res = await clubs.getList()
      console.log(res);
      this.list = res.data
    },
    async getClubsList1() {
      //  console.log(res);id；hottopicId
      let res = await clubs.getClubsList()
      console.log(res)
      this.datalist = res.data
      this.$store.commit("SET_DETAID",this.datalist[0].hottopicId)
      // console.log(this.datalist[0].hottopicId,'1325');
      console.log(this.$store.state.id,'1111');
    },
    async getdataList(autumnid=1){
      let res= await clubs.dataList(autumnid)
      // console.log(this.$route.query.id);
      console.log(res);
      this.tablist=res.data
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    isClick() {
      this.count == 1 ? this.count : '点赞'
    },
    accountClick(){
      this.$router.push("/personCenters/personCenters")
    },
    headleclick(i,id){
      this.luid=i
      this.index=id
      console.log(this.index);
      this.getdataList(this.index)
      if(this.index == 1 || this.index == 4){
        this.ten=true
      }else if(this.index == 2 || this.index == 3){
        this.ten=false
      }
   
    }
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba($color: #eee, $alpha: 0.5);
}
.main{
  height: 700px;
}
.Btab{
  height: 50px;
  line-height: 50px;
  background:#fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
.tabs{
  width: 65px;
 
}
.on{
  border-bottom:2px solid green ;
  color: green;
}
}
.top {
  // position: fixed;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;

  p {
    width: 40px;
    border: 1px solid #ccc;
    border-radius: 20px;

    .van-icon {
      text-align: center;
      margin-left: 8px;
    }
  }
}

.van-icon {
  font-size: 24px;
}

.top .van-search {
  border-radius: 10px;
}

.hot {
  margin-left: 20px;
  height: 30px;
  line-height: 30px;

  span {
    font-size: 16px;
    color: #ccc;
    font-weight: normal;
    float: right;
    margin-right: 10px;
  }
}

.ount {
  width: 100%;
  overflow: auto;
  flex: 1;
  display: flex;
  // justify-content: space-around;
  align-items: center;

  // p:first-child {
  //   margin-left: 260px;
  // }

  p {
    position: relative;

    img {
      width: 140px;
      height: 180px;
      margin: 0 10px;
      border-radius: 10px;
    }

    .now {
      margin-left: 5px;
      width: 140px;
      height: 180px;
      position: absolute;
      top: 0;
      left: 10px;
      right: 0;
      bottom: 10px;
     
      color: #fff;

      b {
        display: block;
        position: absolute;
        bottom: 50px;
        font-weight: normal;
        font-size: 14px;
      }

      span {
        position: absolute;
        bottom: 0;
        font-size: 16px;

        .van-icon {
          font-size: 16px;
        }
      }
    }
  }
}
.tabtu{
  display: flex;
}
.maincon {
  height: 98%;
  overflow: scroll;
  flex: 1;
}


.tu {
  width: 164px;
  background: #fff;
  margin: 10px 10px;
  position: relative;
  border-radius: 10px;

  img {
    width: 160px;
    height: 160px;
    border-radius: 10px;
  }

  b,
  span,
  .van-icon {
    color: #fff;
    font-size: 14px;
  }

  b {
    margin-left: 50px;
  }

  span {
    margin-left: 20px;
  }

  .time {
    position: absolute;
    bottom: 50px;
  }

  .title {
    span {
      margin: 10px 5px;
      display: inline-block;
      width: 30px;
      color: orangered;
      background: rgba($color: #d2891bf4, $alpha: 0.3);
    }
  }
}

.time1 {
  position: absolute;
  bottom: 80px;

  img {
    width: 160px;
    height: 160px;
    border-radius: 10px;
  }

  b,
  span,
  .van-icon {
    color: #fff;
    font-size: 14px;
  }

  b {
    margin-left: 20px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: normal;
    font-size: 14px;
    background: rgba($color: #000000, $alpha: 0.5);
    margin-bottom: 10px;
  }

  span {
    margin-left: 20px;
  }

  .title {
    span {
      display: inline-block;
      width: 30px;
      color: orangered;
      background: rgba($color: #d2891bf4, $alpha: 0.3);
    }
  }
}
</style>